<template>
  <div ref="radar"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'radar',
  data() {
    return {
      echarts: null,
      options: {
        legend: {
          top: 20
        },
        title: {
          text: '旱季/雨季 仪器状态对比',
          subtext: '（纯属虚构）',
          textStyle: {
            color: 'black',
            fontSize: 16
          },
          left: 'center',
          bottom: 40
        },
        series: {
          type: 'radar',
          data: [],
          label: {
            show: true
          },
          // 区域内部填充样式
          // areaStyle: {},
        },
        tooltip: {
          show: true
        },
        radar: {
          center: [250, 190],
          radius: 100,
          // 维度配置，维度名、最大值、最小值
          indicator: [
            {name: '临界温度', max: 10},
            {name: '临界湿度', max: 20},
            {name: '临界压力', max: 10},
            {name: '临界电流', max: 30},
            {name: '临界流量', max: 20}
          ],
          // 外围形状 默认polygon 可选 circle-圆形，polygon-多边形
          shape: 'polygon'
        }
      }
    }
  },
  mounted() {
    this.echarts = echarts.init(this.$refs.radar, 'light')
    this.getRadarData()
    this.echarts.setOption(this.options)
  },
  methods: {
    getRadarData() {
      this.options.series.data = [
        {
          name: '旱季',
          value: [6, 7, 5, 12, 13]
        },
        {
          name: '雨季',
          value: [3, 12, 8, 20, 16]
        }
      ]
    }
  }
}
</script>

<style scoped>

</style>
